<template>
    <div>
        <div class="demo-input-size">
            <el-input v-model="input" class="w-50 m-2" placeholder="请输入关键字" :suffix-icon="Search" />
        </div>

        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
            <el-table-column align="center" label="序号" type="index" width="80" />
            <el-table-column align="center" label="用户id" prop="_id" width="250" />
            <el-table-column align="center" label="用户昵称" prop="adminUser" width="180" />
            <el-table-column align="center" label="用户密码" prop="adminPass" width="200" />
            <el-table-column align="center" label="状态" prop="role" width="180">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.role === 1">活跃</el-tag>
                    <el-tag type="info" v-if="(scope.row.role === 2)">非活跃</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-popconfirm title="确定删除吗?" confirm-button-text="确定" cancel-button-text="再想想">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" circle
                                @click="removeUser(scope.$index, scope.row)">
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination style="float: right; margin-top: 10px;" v-model:current-page="currentPage"
            v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    Delete,
    Edit,
    Search
} from '@element-plus/icons-vue'
import { getUserList, delUserList } from "../../api/api";

const input = ref('')

// 表格的接口数据约束
interface User {
    _id: string
    adminUser: string
    adminPass: string
    role: string
}

const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)


// 每页显示个数
const handleSizeChange = (val: number) => {
    pageSize.value = val
}
// 页码
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}


// 删除用户
const removeUser = async (index: number, row: User) => {
    // console.log(index, row)
    let data = {
        id: row._id
    }
    await delUserList(data)
    getList()
}

// 修改用户
// const updateUser = (index: number, row: User) => {
//     console.log(index, row);

// }

const tableData = ref<User[]>([])

const getList = async() => {
    let res = await getUserList()
    tableData.value = res.data.data
}

onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.w-50 {
    width: 300px;
    float: right;
    margin: 5px 0;
}
</style>